<!-- 选品广场 -->
<template>
  <view class="selectGoods">
    <!-- 无数据-缺省頁 -->
    <DefaultPage
      :tips="infoData.accountId?'当前供货无可帮卖的商品，':'还没有人给你供货，'"
      :tips2="infoData.accountId?'去看看其他人吧':'快去邀请有货源的朋友来给你供货吧。'"
      :custoBtn="true"
      :type="infoData.accountId?2:3"
      :minusHeight="0"
      v-if="!searchCriteria&&!goodsList.length && !getParams.loading"
    >
      <view class="u-flex" v-show="!infoData||!infoData.accountId">
        <button class="buttonStyleNone defaultBtn" open-type="share">
          邀请好友来供货
        </button>
      </view>
    </DefaultPage>
    <!-- 搜索无数据-缺省頁 -->
    <DefaultPage
      tips="暂未搜到相关结果，换个关键词试试～"
      type="3"
      :minusHeight="0"
      v-if="searchCriteria&&!goodsList.length && !getParams.loading"
    >
    </DefaultPage>
    <!-- 商品列表 -->
    <!-- 分类tabs -->
    <view class="goods_msg_box" v-else>
      <view class="ssp-tabs">
        <u-tabs
            :list="tabList"
            :current="tabCurrent"
            :height="56"
            :show-bar="false"
            :active-item-style="activeItemStyle"
            :itemStyle="itemStyle"
            active-color="#FFFFFF"
            font-size="28"
            :bold="false"
            :gutter="24"
            inactive-color="#969799"
            @change="_tabsChange"
        />
      </view>
      <ScrollList
        ref="scrollView"
        :minusHeight="47"
        @interrupt="interrupt"
        @scrolltolower="scrolltolower"
      >
        <template slot="content" class="u-p-24">
          <view
            v-for="(item, index) in goodsList"
            :key="index"
            class="u-p-24 goodsForBox"
            @click.stop="navigateTo({url: `/pagesB/goods/goodsDetails?shopWindowId=${item.shopWindowId}`})"
          >
            <view class="goodsImage">
              <image
                :src="item.image[0].url"
                mode="aspectFill"
                style="width: 100%; height: 100%"
              />
            </view>
            <view class="goodsMsg">
              <view class="ov2">{{ item.goodsName }}</view>
              <view class="justify-between u-p-t-8">
                <view class="fz-10 viceColor u-flex" style="flex:1;" v-if="!infoData.communityName">
                  <view style="width: 32rpx; height: 32rpx; margin-right: 6rpx;border-radius: 50%;overflow: hidden;flex-shrink:0;">
                    <image
                      :src="item.communityLogo || 'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'"
                      mode="aspectFill"
                      style="width:100%;height:100%;"
                    />
                  </view>
                  <view class="communityName_box">{{ item.communityName }}</view>
                </view>
                <view class="fz-10 themeFontColor sold_box"
                  >已售{{ item.saleCount }}</view
                >
              </view>
              <view style="flex: 1"></view>
              <!-- 最大最小佣金相等 -->
              <view
                class="themeFontColor u-p-t-8 "
                v-if="item.mixCommission === item.maxCommission"><text class="fz-10 ">赚￥</text><text class="fw6">{{ item.mixCommission || item.maxCommission }}</text></view>
              <!-- 佣金区间 -->
              <view class="themeFontColor u-p-t-8" v-else
                ><text class="fz-10">赚￥</text><text class="fw6">{{ item.mixCommission }}~{{item.maxCommission}}</text></view>

              <view class="justify-between items-end fz-10 viceColor u-p-t-8">
                <!-- 最大最小售价相等 -->
                <view v-if="item.minSalePrice === item.maxSalePrice"
                  >售价￥{{ item.minSalePrice || item.maxSalePrice }}，佣金{{
                    item.commissionRatio
                  }}%</view
                >
                <!-- 售价区间 -->
                <view v-else
                  >售价￥{{ item.minSalePrice }}~{{ item.maxSalePrice }}，佣金{{
                    item.commissionRatio
                  }}%</view
                >
                <view v-if="item.isAdd || item.isSelected==1">已添加小店</view>
                <view
                  v-else
                  class="addwindowBtn"
                  @click.stop="_addWindow(item, index)"
                  >+ 小店</view
                >
              </view>
            </view>
          </view>
        </template>
      </ScrollList>
    </view>
    <!-- 设置下级帮卖 -->
    <SetChild :show="childShow" :item="clickItem" :type="0" @success="_addSuccess" @close="childShow = false" />
  </view>
</template>

<script>
import ScrollList from "@/components/scrollList/index.vue";
import DefaultPage from "@/components/defaultPage/index.vue";
import SetChild from "./setChild.vue";
import goodsApi from '@/api/goods.js'
import goods from "@/api/goods.js";

export default {
  name: "selectGoods",
  props: {
    infoData: {
      type: Object,
      default: {},
    },
  },
  components: {
    DefaultPage,
    ScrollList,
    SetChild
  },
  computed: {
    // tabs中active样式
    activeItemStyle() {
      return {
        background: '#E44435',
        borderRadius: '44rpx'
      }
    },
    // tab item样式
    itemStyle() {
      return {
        background: '#F2F3F5',
        borderRadius: '44rpx',
        margin: '0 8rpx'
      }
    }
  },
  props: {
    searchCriteria: {
      type: String,
      default: ''
    },
    tabsCur: {
      type: String,
      default: ''
    },
  },
  watch: {
    searchCriteria(){ // 搜索字段有变化刷新
      if (this.tabsCur==0) {
        this.getParams.currentPage = 1
        this.getParams.finish = false
        this._getGoodsSquare()
      }
    },
  },
  data() {
    return {
      getParams: {
        currentPage: 1,
        pageSize: 10,
        finish: false, // 是否还有更多
        loading: true
      },
      goodsList: [],
      childShow: false,
      clickItem: {},
      clickIndex: 0, // 点击的下标
      tabList: [], // 分类tabs列表
      tabCurrent: 0, // 激活分类下标
      categoryId: '',
    };
  },
  created() {
    this._getGoodsSquare()
    this.getTabs()
  },
  methods: {
    // 分类tabs改变触发
    _tabsChange(index) {
      if (this.tabCurrent == index) return
      this.tabCurrent = index
      this.getParams.currentPage = 1
      this.getParams.finish = false
      this.categoryId = this.tabList[this.tabCurrent].id
      this._getGoodsSquare()
      this.$refs.scrollView && this.$refs.scrollView.goToScroll(0)
    },
    // 获取分类列表
    async getTabs() {
      const { data } = await goodsApi.getSHCategory()
      const categories = data || []
      categories.unshift({ name: '全部', id: '' })
      this.tabList = categories
    },
    // 获取列表
    async _getGoodsSquare() {
      this.getParams.loading = true
      this.getParams = {
        ...this.getParams,
        searchCriteria: this.searchCriteria || '',
        categoryId: this.categoryId
      }
      if (this.infoData&&this.infoData.communityName) {
        this.getParams = {
          ...this.getParams,
          accountId: this.infoData.accountId
        }
      }
      const { data } = await goods.getGoodsSquare(this.getParams)
      if(data){
        data.records.forEach((v) => {
          v.image = JSON.parse(v.image);
          this.$set(v, "isAdd", false); // 是否已添加橱窗
        });
        if (this.getParams.currentPage === 1) {
          this.goodsList = data.records;
        } else {
          this.goodsList.push(...data.records);
        }
        this.getParams.finish =
          this.getParams.currentPage * this.getParams.pageSize !==
          this.goodsList.length;
      } else {
        this.getParams.currentPage = 1
        this.goodsList = []
      }
      this.getParams.loading = false
    },
    // 加载更多
    async scrolltolower() {
      this.getParams.currentPage += 1;
      await this._getGoodsSquare();
      this.$refs.scrollView.loadFinish(this.getParams.finish ? 3 : 0); // 加载完成，是否还有更多
    },
    // 刷新
    async interrupt() {
      this.getParams.currentPage = 1;
      this.getParams.finish = false;
      await this._getGoodsSquare();
      setTimeout(() => {
        this.$refs.scrollView.refreshFinish(); // 刷新完成
      }, 500);
    },
    //  添加橱窗
    _addWindow(item, index) {
      this.childShow = true;
      this.clickItem = JSON.parse(JSON.stringify(item));
      this.clickIndex = index;
    },
    // 添加成功
    _addSuccess(){
      this.goodsList[this.clickIndex].isAdd = true; // 状态改为已添加橱窗
    }
  },
};
</script>
<style lang="scss" scoped>
.selectGoods {
  background: #F7F8FA;
  height: 100%;
  .goods_msg_box {
    width: 100%;
    height: 100%;
    .ssp-tabs {
      padding: 18rpx 0 14rpx 24rpx;
      background-color: #ffffff;
    }
  }
  .goodsForBox {
    background-color: #fff;
    display: flex;
    margin-bottom: 24rpx;
    box-shadow: 0rpx 4rpx 24rpx rgba(150, 151, 153, 0.16);
    border-radius: 16rpx;
    &:last-child {
      margin-bottom: 0rpx;
    }
    .goodsImage {
      width: 200rpx;
      height: 200rpx;
      border-radius: 8rpx;
      overflow: hidden;
      margin-right: 24rpx;
    }
    .goodsMsg {
      flex: 1;
      display: flex;
      flex-direction: column;
      .ov2 {
        @include bov(2);
      }
      .addwindowBtn {
        color: #fff;
        padding: 8rpx 20rpx;
        border-radius: 30rpx;
        background-color: #e44435;
      }
      .communityName_box {
        width: 300rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap !important;
      }
      .sold_box {
        flex: 0 0 auto;
      }
    }
  }
  .defaultBtn {
    background: #e44435;
    padding: 0 30rpx;
    border-radius: 60rpx;
    color: #fff;
    line-height: 60rpx;
    margin: 0 auto;
    margin-top: 25rpx;
    font-size: 28rpx;
  }
}
</style>